<template>
  <div>
    <div class="home_nav_bar">
      <ul>
        <li 
          v-for="(item, index) in list" 
          :key="index"
          :class="currentIndex === index ? 'list_active': ''"
          @click="itemClick(index)">
          {{item.title}}
        </li>
        <div class="line" :style="'transform: translateX(' + this.isActive + 'rem)'"></div>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentIndex: 0,
        list: [
        {title: '推荐',link: '/home/commend'},
        {title: 'BT',link: '/home/abnormal'},
        {title: '折扣',link: '/home/discount'},
        {title: 'H5',link: '/home/web'},
        ]
      }
    },
    activated() {
      this.currentIndex = 0
    },
    methods: {
      itemClick(index) {
        this.currentIndex = index
        this.$router.replace(this.list[index].link)
      }
    },
    computed: {
      isActive() {
        return this.currentIndex * 1.6 + .346667
      }
    },
  }
</script>

<style lang="less" scoped>
.home_nav_bar {
  width: 10rem;
  height: 1.173333rem;
  background: linear-gradient(360deg, #e38b50, #e69a50);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  ul {
    display: flex;
    position: relative;
    .list_active {
      font-size: .533333rem;
    }
    li {
      width: 1.6rem; 
      font-weight: bold;
      text-align: center;
      line-height: 1.173333rem;
      font-size: .426667rem;
      color: #fff;
    }
    .line {
      position: absolute;
      width: .906667rem;
      background: #fff;
      height: .08rem;
      bottom: -0.013333rem;
      transition: 0.5s ease;
    }
  }
}


</style>